<template>
    <div>
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <MyCenterPlugin></MyCenterPlugin>
        <ShoppingCartSearch></ShoppingCartSearch>
    <div class="MyTaobao-logo">
      <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
      <h2>我的淘宝</h2>
    </div>
    <div class="MyTaobao-part1">
         <img id="MyTaobao-part1-usertx" class="MyTaobao-part1-usertx"  src="https://img.alicdn.com/sns_logo/i3/O1CN01XFT75J1gqu0kwWCO1_!!6000000004194-2-tps-440-440.png"></img>
         <span class="MyTaobao-part1-txtext"  v-show="txtextShow">编辑资料</span>
         <div class="MyTaobao-part1-txtext-cover" @mouseenter="enterImg1($event)" @mouseleave="leaveImg1($event)"></div>
         <div class="MyTaobao-part1-text1div">
             <span>显示用户名</span>
            <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
            <span class="MyTaobao-part1-text1-address">收货地址</span>
        </div>
            <div class="MyTaobao-part1-text2div">
                <span class="MyTaobao-part1-text2-hb">红包&nbsp;<strong>0</strong>&nbsp;元</span>
                <span class="MyTaobao-part1-text2-yhq">优惠券&nbsp;<strong>0</strong>&nbsp;张</span>
                <div class="MyTaobao-part1-text3div">
                    <img src="https://gw.alicdn.com/imgextra/i2/O1CN012aj5It1VUxLiU2Fbo_!!6000000002657-2-tps-49-60.png"></img>
                    <span class="MyTaobao-part1-text3-lq"><strong>领券中心</strong></span>
                    <span class="MyTaobao-part1-text3-yh">发现官方补贴&nbsp;领优惠</span>
                    <button>去领取</button>
                </div>
                <div class="MyTaobao-part1-text3div-cover"></div>
            </div>
    </div>
    <div class="MyTaobao-part2">
        <div class="MyTaobao-part2-item1">
           <router-link style="list-style-type: none;color: black;" to="/PurchasedView"><span class="MyTaobao-part2-item1-mydd"><strong>我的订单</strong><i class="iconfont icon-xiayige"></i></span></router-link>
          <div class="MyTaobao-part2-item1-divs">
             <div>
            <span class="div-bignum"><strong>0</strong></span>
            <br>
            <span>待付款</span>
            </div>
             <div>
            <span class="div-bignum"><strong>0</strong></span>
            <br>
            <span>待发货</span>
           </div>
            <div>
            <span class="div-bignum"><strong>0</strong></span>
            <br>
            <span>待收货</span>
           </div>
            <div>
            <span class="div-bignum"><strong>0</strong></span>
            <br>
            <span>待评价</span>
           </div>
            <div>
            <span class="div-bignum"><strong>0</strong></span>
            <br>
            <span>退款/售后</span>
           </div>
          </div>
          <router-link style="list-style-type: none;color: black;" to="/PurchasedView"><span class="MyTaobao-part2-item1-divs-showalldd">查看全部订单<i class="iconfont icon-xiayige"></i></span></router-link>
        </div>
        <div class="MyTaobao-part2-item2">
            <router-link style="list-style-type: none;color: black;" to="/FavoriteBabyView"><span class="MyTaobao-part2-item2-itemName"><strong>我的收藏</strong><i class="iconfont icon-xiayige"></i></span></router-link>
            <div v-show="!shoucangEmpty">
                <img class="MyTaobao-part2-item2-itemImg" src="https://img.alicdn.com/imgextra/i1/2128031955/O1CN010U9Kzg1QJRNppU6Vk_!!2128031955-0-alimamacc.jpg"></img>
                <span class="MyTaobao-part2-item2-spname">潮牌牛仔裤潮牌牛仔裤潮牌牛仔裤潮牌牛仔裤</span>
                <span class="MyTaobao-part2-item2-spprice">￥59</span>
            </div>
            <div v-show="shoucangEmpty">
                <img class="MyTaobao-part2-empty-img" src="https://gw.alicdn.com/imgextra/i4/O1CN01gl9yYQ1wxnzwA6eDE_!!6000000006375-2-tps-140-140.png"></img>
                <span class="MyTaobao-part2-empty-text">暂无收藏</span>
                <br>
                <router-link style="list-style-type: none;color: black;" to="/"><button class="MyTaobao-part2-empty-button">去逛逛</button></router-link>
            </div>
            
        </div>
        <div class="MyTaobao-part2-item3"> 
            <router-link style="list-style-type: none;color: black;" to="/MyFootView"><span class="MyTaobao-part2-item2-itemName"><strong>我的足迹</strong><i class="iconfont icon-xiayige"></i></span></router-link>
            <div v-show="!zujiEmpty">
                <img class="MyTaobao-part2-item2-itemImg" src="https://img.alicdn.com/imgextra/i1/2128031955/O1CN010U9Kzg1QJRNppU6Vk_!!2128031955-0-alimamacc.jpg"></img>
                <span class="MyTaobao-part2-item2-spname">潮牌牛仔裤潮牌牛仔裤潮牌牛仔裤潮牌牛仔裤</span>
                <span class="MyTaobao-part2-item2-spprice">￥59</span>
            </div>
            <div v-show="zujiEmpty">
                <img class="MyTaobao-part2-empty-img" src="https://gw.alicdn.com/imgextra/i4/O1CN01gl9yYQ1wxnzwA6eDE_!!6000000006375-2-tps-140-140.png"></img>
                <span class="MyTaobao-part2-empty-text">没有足迹</span>
                <br>
                <router-link style="list-style-type: none;color: black;" to="/"><button class="MyTaobao-part2-empty-button">去逛逛</button></router-link>
            </div>
        </div>
        <div class="MyTaobao-part2-item4">
            <router-link style="list-style-type: none;color: black;" to="/ShoppingCart"><span class="MyTaobao-part2-item2-itemName"><strong>购物车</strong><i class="iconfont icon-xiayige"></i></span></router-link>
             <div v-show="!shoppingcartEmpty">
                <img class="MyTaobao-part2-item2-itemImg" src="https://img.alicdn.com/imgextra/i1/2128031955/O1CN010U9Kzg1QJRNppU6Vk_!!2128031955-0-alimamacc.jpg"></img>
                <span class="MyTaobao-part2-item2-spname">康师傅方便面康师傅方便面康师傅方便面康师傅方便面</span>
                <span class="MyTaobao-part2-item2-spprice">￥99</span>
            </div>
                <div v-show="shoppingcartEmpty">
                <img class="MyTaobao-part2-empty-img" src="https://gw.alicdn.com/imgextra/i4/O1CN01gl9yYQ1wxnzwA6eDE_!!6000000006375-2-tps-140-140.png"></img>
                <span class="MyTaobao-part2-empty-text">购物车为空</span>
                <br>
                <router-link style="list-style-type: none;color: black;" to="/"><button class="MyTaobao-part2-empty-button">去逛逛</button></router-link> 
            </div>
        </div>
    </div>
      <div class="MyTaobao-part3">
            <h2 class="MyTaobao-part3-guess">猜你喜欢</h2>
            <div class="MyTaobao-part3-row-items" v-for="value in 3">
                <div class="MyTaobao-part3-item">
                    <div class="MyTaobao-part3-list-item" v-for="item in 5">
                        <img src="https://img.alicdn.com/imgextra/i1/2128031955/O1CN010U9Kzg1QJRNppU6Vk_!!2128031955-0-alimamacc.jpg"
                            alt="商品图片"></img>
                        <h2 class="MyTaobao-part3-itemName">烤肉牛排</h2>
                        <h1 class="MyTaobao-part3-item-price">￥20.00</h1>
                        <h2 class="MyTaobao-part3-ms">1000+人购买</h2>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import HomeTop from "../components/HomeTop.vue";
import HomeRight from "../components/HomeRight.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import "../style/MyTaobaoView.css";
export default {
  name: "MyTaobaoView",
  data() {
    return {
        txtextShow: false,
        shoucangEmpty: false,
        shoppingcartEmpty: true,
        zujiEmpty: true,
    };
  },
  methods: {
    enterImg1(event){
        this.txtextShow = true;
        document.getElementById("MyTaobao-part1-usertx").style.filter = "brightness(0.5)"
    },
    leaveImg1(event){
        this.txtextShow = false;
        document.getElementById("MyTaobao-part1-usertx").style.filter = "brightness(1)"
    }
  },
};
</script>